<template>
  <view class="container">
    <!-- style="display: inline-block; text-align: center; line-height: 100rpx; padding: 0 10rpx" -->
    <scroll-view scroll-x="true" class="navbar">
      <view
        :class="{ navcommon: navindex == index }"
        v-for="(item, index) in navlist"
        :key="index"
        @click="changenav(index, item.id)"
        style="display: inline-block; text-align: center; line-height: 100rpx; padding: 0 10rpx"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <!--    <view class="navbar">
      <view :class="{ navcommon: navindex == index }" v-for="(item, index) in navlist" :key="index" @click="changenav(index, item.id)">{{ item.name }}</view>
    </view> -->
    <!-- 成绩 -->
    <view style="display: flex; align-items: center; justify-content: space-between">
      <view class="title">学生姓名 近7次成绩变化</view>
      <view class="addgrades" @click="goaddgrades">成绩录入</view>
    </view>
    <!-- x选择分数制 -->
    <uni-data-select placeholder="请选则我的满分制" class="choosegrades" v-model="value" :localdata="range" @change="scorechange"></uni-data-select>
    <!-- 等级 -->
    <view class="leavel">
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">成绩等级说明</view>
      <!-- 分段 -->
      <view class="grades">
        <view class="common" style="background: #ffa119; border-radius: 100rpx 0 0 100rpx">{{ currentleavel - 20 + '-' + currentleavel }}</view>
        <view class="common" style="background: #ffa119">{{ currentleavel - 40 + '-' + (currentleavel - 20) }}</view>
        <view class="common" style="background: #ffc685">{{ currentleavel - 60 + '-' + (currentleavel - 40) }}</view>
        <view class="common" style="background: #ffedd9; border-radius: 0rpx 100rpx 100rpx 0rpx">
          {{ (currentleavel == 100 ? 0 : currentleavel - 80) + '-' + (currentleavel - 60) }}
        </view>
      </view>
      <!-- 等级 -->
      <view style="display: flex; box-sizing: border-box">
        <view class="dengji">A级</view>
        <view class="dengji">B级</view>
        <view class="dengji">C级</view>
        <view class="dengji">D级</view>
      </view>
    </view>
    <!-- 图表 -->
    <uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec"></uni-ec-canvas>
    <view>
      <view class=""></view>
    </view>
  </view>
</template>

<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue';
import * as echarts from '@/components/uni-ec-canvas/echarts.min.js';
let chart = null;
export default {
  components: {
    uniEcCanvas
  },
  data() {
    return {
      currentleavel: 150, // 当前的分数等级
      xdata: [], // x轴的数据
      ydata: [], // y轴的数据
      value: 2,
      range: [
        { value: 0, text: '100分' },
        { value: 1, text: '120分' },
        { value: 2, text: '150分' }
      ],
      subjectid: '', // 学科的id
      navlist: [],
      navindex: 0,
      ec: {
        lazyLoad: true
      },
      option: {
        xAxis: {
          axisTick: {
            show: false // 设置为true显示刻度线
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: 45 // 旋转角度
          },
          type: 'category',
          data: []
        },
        yAxis: {
          axisLine: {
            show: true
          },
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true,
            symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
            symbolSize: 10, //小圆点的大小
            itemStyle: {
              color: '#3553E8'
            },
            lineStyle: {
              color: 'black'
            }
          }
        ]
      }
    };
  },
  methods: {
    // 导航栏切换 、 获取分数
    async changenav(index, id) {
      this.navindex = index;
      this.subjectid = id;
      this.xdata = [];
      this.ydata = [];
      // 获取分数
      const res = await uni.$http.post('/resultinput/check', {
        type: '1',
        grade_id: this.subjectid
      });
      console.log('获取的分数数据', res.data.data.list);
      await res.data.data.list.forEach((item) => {
        if (item.exam_data != '') {
          this.xdata.push(item.exam_data);
        }
        if (item.exam_score != '') {
          this.ydata.push(Number(item.exam_score));
        }
      });
      for (let i = 1; i < 7; i++) {
        if (this.xdata.length < 7) {
          this.xdata.push('');
        }
      }
      for (let i = 1; i < 7; i++) {
        if (this.ydata.length < 7) {
          this.ydata.push(0);
        }
      }
      this.option.xAxis.data = this.xdata;
      this.option.series[0].data = this.ydata;
      chart.setOption(this.option);
    },
    // 获取科目列表
    async getsubjeclist() {
      const res = await uni.$http.post('/index/subjectList', {
        name: ''
      });
      console.log('科目列表', res.data.data.list);
      this.navlist = res.data.data.list;
    },
    initChart(canvas, width, height, canvasDpr) {
      console.log(canvas, width, height, canvasDpr);
      chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr
      });
      canvas.setChart(chart);
      chart.setOption(this.option);
      return chart;
    },
    // 分数制变化
    scorechange(e) {
      this.currentleavel = this.range[e].text;
      this.currentleavel = this.currentleavel.slice(0, -1);
      console.log(this.currentleavel);
      this.option.yAxis.max = this.currentleavel;
      chart.setOption(this.option);
    },
    // 成绩录入
    goaddgrades() {
      uni.navigateTo({
        url: '/parents/addgrades/addgrades'
      });
    }
  },
  async onLoad() {
    // 获取科目列表
    await this.getsubjeclist();
    this.changenav(this.navindex, this.navlist[0].id);
    setTimeout(() => {
      console.log(this.$refs);
    }, 2000);
    this.$refs.canvas.init(this.initChart);
  },
  onShow() {
    this.changenav(this.navindex, this.navlist[0].id);
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .navbar {
    box-sizing: border-box;
    white-space: nowrap;
    // display: flex;
    // align-items: center;
    // justify-content: space-evenly;
    width: 750rpx;
    height: 100rpx;
    background-color: #3553e8;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #ffffff;
  }
  .navcommon {
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
    padding-bottom: 4rpx;
    border-bottom: 8rpx solid #ffffff;
  }
  .title {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #222222;
    margin: 30rpx;
  }
  .addgrades {
    box-sizing: border-box;
    width: 160rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    color: #fff;
    background: #3553e8;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    margin-right: 38rpx;
  }
  .leavel {
    box-sizing: border-box;
    width: 682rpx;
    height: 198rpx;
    margin: 20rpx 30rpx;
    padding: 20rpx;
    background: #f5f7ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .grades {
      box-sizing: border-box;
      display: flex;
      width: 632rpx;
      height: 28rpx;
      margin: 20rpx;
      .common {
        box-sizing: border-box;
        width: 158rpx;
        height: 28rpx;
        text-align: center;
        line-height: 28rpx;
        font-size: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #222222;
      }
    }
    .dengji {
      width: 25%;
      text-align: center;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
  }
  /deep/ .uni-select {
    border: none;
  }
  /deep/ .uni-stat__select {
    box-sizing: border-box;
    width: 682rpx !important;
    height: 90rpx !important;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
    margin-left: 30rpx;
  }
  .uni-ec-canvas {
    box-sizing: border-box;
    width: 100%;
    height: 500rpx;
    display: block;
    margin-top: 30rpx;
  }
}
</style>
